import React, { useEffect, useState } from 'react';
import { Card, message, Skeleton } from 'antd';
import axios from "axios";




interface Trem {
    EN: string;
    ZH: string;
    UY: string;
}

const TremListq: React.FC = () => {
    const [trems, setTrems] = useState<Trem[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const token = localStorage.getItem('token');

    const fetchTremAll = async () => {
        try {
            const response = await axios.get<Trem[]>('/api/dictionary/all', {
                headers: {
                    Authorization: `Bearer ${token}`,
                },
            });
            setTrems(response.data);
            setIsLoading(false);
        } catch (err) {
            setIsLoading(false);
            message.error('获取词典数据失败，请稍后再试。');
            console.error(err); // 打印错误详情
        }
    };

    useEffect(() => {
        fetchTremAll();
    }, []);

    return (
        <div>
            {isLoading ? (
                <Skeleton active />
            ) : (
                <div className="trem-cards-container"
                     >
                    {trems.map((trem) => (
                        <Card
                            key={trem.UY}
                            extra={<span className="trem-uy">{trem.ZH}</span>}
                            className="trem-card"
                        >
                            <p className="trem-zh">{trem.UY}</p>
                        </Card>
                    ))}
                </div>
            )}
        </div>
    );
};

export default TremListq;